<template>
	<view class="fl-s-s p-r-30">
		<text class="title">注册</text>
		<view class="w-1 fl-s-s">
			<view class="w-1 fl-s-s m-t-70">
				<input class="myinput w-1" v-model.trim="mobile" type="number" maxlength="11" placeholder-style="color:#999999;"
					placeholder="请输入手机号" />
				<view class="w-1 fr-b-c m-t-40"
					style="height: 98rpx; border-bottom: 2rpx solid #E4E4E4;">
					<input type="text" v-model="code" placeholder="请输入验证码" />
					<!-- @end="end" @start="start" -->
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
					</u-verification-code>
					<!-- <u-button @tap="getCode" hover-class="none" :custom-style="btnStyle">{{tips}}</u-button> -->
					<view class="v_send_btn fm-ali fr-c" @click="getCode">
						{{tips}}
					</view>
				</view>
				<input class="myinput w-1 m-t-60" type="text" v-model="invitation_code" placeholder-style="color:#999999;"
					placeholder="请输入邀请码（非必填）" />
				<input password class="myinput w-1 m-t-60" type="text" v-model="password" placeholder-style="color:#999999;"
					placeholder="请输入密码" />
			</view>
			<view class="fr-s-c w-1" style="margin-top: 148rpx;">
				<image v-if="!agree" @click="agree=!agree" src="/static/images/login/not_select.png" style="width: 30rpx; height: 30rpx;"></image>
				<image v-else @click="agree=!agree" src="/static/images/shopcar/color_selected.png" style="width: 30rpx; height: 30rpx;"></image>
				<view class="fr-s-c m-l-20 xy-text">我已阅读并同意<navigator url="/pages/UserCenter/Privacy/Privacy?id=1" style="color: #FA360A;">《用户协议》</navigator>和
					<navigator url="/pages/UserCenter/Privacy/Privacy?id=2" style="color: #FA360A;">《隐私政策》</navigator>
				</view>
			</view>
			<view class="sub-btn fr-c w-1" @click="subInfo">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				oaid:'',
				btnStyle: {
					width: '168rpx',
					height: '70rpx',
					borderRadius: '12rpx',
					border: '2rpx solid #EA4A43',
					fontSize: '28rpx',
					fontFamily: 'Alibaba',
					color: '#EA4A43'
				},
				seconds: 120,
				mobile:'',// 手机号
				code:'',      // 验证码
				invitation_code:'',  // 邀请码
				password:'',      // 密码
				agree:false   // 是否同意协议
			}
		},
		onShow() {
			this.getOAID()
		},
		methods: {
			getOAID(){
				var t=this;
				plus.device.getOAID({
					success:e=>{
						t.oaid = e.oaid;
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(!this.mobile) return this.$u.toast('请输入手机号');
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask:true
					})
					this.$get({
						url:'/wanlshop/sms/send',
						data:{
							mobile:this.mobile
						}
					}).then(res=>{
						if(res.code == 1){
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}else{
							this.$u.toast(res.msg);
						}
						
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			
			// 提交注册信息
			subInfo(){
				if(!this.mobile) return this.$u.toast('请输入手机号');
				if(!this.code) return this.$u.toast('请输入验证码');
				// if(!this.invitation_code) return this.$u.toast('请输邀请码');
				if(!this.password) return this.$u.toast('请输入密码');
				if(!this.agree) return this.$u.toast('请同意隐私协议和用户政策');
				
				this.$post({
					url:'/wanlshop/user/register',
					data:{
						mobile: this.mobile,
						captcha: this.code,
						client_id: uni.getStorageSync("wanlshop:chat_client_id")?uni.getStorageSync("wanlshop:chat_client_id") : null,
						password:this.password,
						invitation_code:this.invitation_code,
					}
				}).then(res=>{
					console.log(res)
					uni.showToast({
						title:res.msg,
						mask:true
					})
					// // for (let i in res.data) {
					// // 	uni.setStorageSync(i,res.data[i])
					// // }
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/Login/Login'
						})
					},1500)
				})
			}
		}
	}
</script>

<style scoped>
	.title {
		margin-top: 180rpx;
		font-size: 52rpx;
		font-family: Alibaba;
		color: #333333;
	}

	.myinput {
		height: 76rpx;
		border-bottom: 1rpx solid #E4E4E4;
		font-size: 34rpx;
		font-family: Alibaba;
		color: #999999;
	}

	.my-u-input {
		padding-left: 0 !important;
		padding-right: 0 !important;
		height: 76rpx;
		border-bottom: 1rpx solid #E4E4E4 !important;
		border-radius: 0;
		font-size: 34rpx;
		font-family: Alibaba;
		color: #999999;
	}

	.sendbtn {
		width: 180rpx;
		height: 70rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 2rpx solid #EA4A43;
		font-size: 32rpx !important;
		color: #EA4A43 !important;
		font-family: Alibaba;
		background: transparent;
	}

	.sub-btn {
		height: 100rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
		color: #FFFFFF;
		margin-top: 58rpx;
	}

	.xy-text {
		font-size: 28rpx;
		font-family: Alibaba;
		color: #333333;
	}
	
	.v_send_btn{
		padding: 0 10rpx;
		height: 70rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 2rpx solid #EA4A43;
		font-size: 32rpx;
		color: #EA4A43;
	}
</style>
